<template>
  <div class="music-audio">
    <audio id="player"
           :src="url"
           controls="controls"
           preload="auto"
           @canplay="startPlay"
           @ended="ended">
    </audio>
  </div>
</template>

<script>
import {mapGetters} from "vuex";

export default {
  name: 'musicAudio',
  computed: {
    ...mapGetters([
      'url',
      'isPlay'
    ])
  },
  watch: {
    // 监听播放还是暂停
    isPlay: function () {
      this.togglePlay()
    }
  },
  methods: {
    // 获取链接后开始播放
    startPlay() {
      let player = document.querySelector('#player')
      // 开始播放
      player.play()
    },
    // 播放完成之后触发
    ended() {
      this.isPlay = false
    },
    // 开始、暂停
    togglePlay() {
      let player = document.querySelector('#player')
      if (this.isPlay) {
        player.play()
      } else {
        player.pause()
      }
    }
  }
}
</script>

<style>
.music-audio {
  display: none;
}
</style>
